<template>
<div>
    <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
            <el-form-item label="MAC地址:" prop="ydz">
                <el-input v-model="queryParams.ydz" placeholder="请输入域地址" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery()">查询</el-button>
                <el-button type="info" icon="el-icon-setting" @click="gwYdzDialog = true">下发网关域地址</el-button>
                <el-button type="info" icon="el-icon-setting" @click="devYdzDialog = true">下发设备域地址</el-button>
                <el-button type="info" icon="el-icon-setting" @click="OpenGroupControlDialog()">群控</el-button>
                <el-button type="info" icon="el-icon-setting" @click="singleControl = true">单控</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="listData" stripe class="table" header-cell-class-name="table-header" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column type="sadder" label="设备MAC" align="center"></el-table-column>
            <el-table-column type="devType" label="设备类型" align="center"></el-table-column>
            <el-table-column type="ydz" label="域地址" align="center"></el-table-column>
            <el-table-column type="devNo" label="设备序号" align="center"></el-table-column>
            <el-table-column type="addTime" label="更新时间" :formatter="dateFormat_addTime" width="140"></el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination backgroud layout="sizes, total, prev, pager, next, jumper"
            :current-page="queryParams.pageNum"
            :page-size="[10, 20, 40, 60]"
            :total="totalCount"
            @current-change="handlePageChange"
            @Size-change="handleSizeChange"
        ></el-pagination>
    </div>
    <!-- 下发网关域地址 -->
    <div>
        <el-dialog title="配置网关域地址" width="40%" :visible.sync="gwYdzDialog">
            <el-form label-width="100px">
                <el-form-item prop="deviceId" label="网关MAC">
                    <el-input type="text" v-model="gwYdz.gwMac" placeholder="输入网关MAC" clearable></el-input>
                </el-form-item>
                <el-form-item label="域地址">
                    <el-input type="text" v-model="gwYdz.sadder" placeholder="输入域地址" clearable></el-input>
                </el-form-item>
                <el-form-item label="序号范围">
                    <el-input type="text" v-model="gwYdz.numberNo" placeholder="输入序号范围 200 以内" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="gwYdzDialog=false">取消</el-button>
                <el-button @click="sendGwYdz">发送</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 下发设备域地址 -->
    <div>
        <el-dialog title="配置设备域地址" width="40%" :visible.sync="devYdzDialog">
            <el-form label-width="100px">
                <el-form-item prop="deviceId" label="网关MAC">
                    <el-input type="text" v-model="devYdz.gwMac" placeholder="输入网关MAC" clearable></el-input>
                </el-form-item>
                <el-form-item label="域地址">
                    <el-input type="text" v-model="devYdz.sadder" placeholder="输入域地址" clearable></el-input>
                </el-form-item>
                <el-form-item label="序号范围">
                    <el-input type="text" v-model="devYdz.numberNo" placeholder="输入序号范围 200 以内" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="devYdzDialog=false">取消</el-button>
                <el-button @click="sendDevYdz">发送</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 单控 -->
    <div>
        <el-dialog title="单控" width="30%" :visible.sync="singleControl">
            <el-form label-width="100px">
                <el-form-item prop="deviceId" label="网关MAC">
                    <el-input type="text" v-model="singleControlval.gwMac" placeholder="单控网关MAC" clearable></el-input>
                </el-form-item>
                <el-form-item label="设备MAC">
                    <el-input type="text" v-model="singleControlval.sadder" placeholder="单控设备MAC" clearable></el-input>
                </el-form-item>
                <el-form-item label="闪烁状态">
                    <el-input type="text" v-model="singleControlval.shansb" placeholder="闪烁状态(仅对灯光类设备有效)" clearable></el-input>
                </el-form-item>
                <el-form-item label="倒计时">
                    <el-input type="text" v-model="singleControlval.countdown" placeholder="倒计时恢复原有状态" clearable></el-input>
                </el-form-item>
                <el-form-item label="模式">
                    <el-input type="text" v-model="singleControlval.typeStatus" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="模式状态值">
                    <el-input type="text" v-model="singleControlval.statusTypeVal" placeholder="控制指令 四位字节码" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态类型码">
                    <el-input type="text" v-model="singleControlval.statusType" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="预留字节">
                    <el-input type="text" v-model="singleControlval.yl" placeholder="" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="singleControl=false">取消</el-button>
                <el-button @click="sendSingleControl">发送</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 群控配置 -->
    <div>
        <el-dialog title="群控配置" width="30%" :visible.sync="groupControlDialog">
            <el-form label-width="100px">
                <el-form-item label="模式">
                    <el-input type="text" v-model="groupControlVal.typeStatus" placeholder="配置模式" clearable></el-input>
                </el-form-item>
                <el-form-item label="模式状态值">
                    <el-input type="text" v-model="groupControlVal.statusType" placeholder="控制指令" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态类型码">
                    <el-input type="text" v-model="groupControlVal.statusTypeVal" placeholder="配置状态类型" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="groupControlDialog=false">取消</el-button>
                <el-button @click="sendGroupControl">发送</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script>
import moment from 'moment';
import { getGroupControlList, sendYdzByGw, sendYdzByGwInfo, sendDevNumberNo, sendSingleControl, sendGroupControl } from '@/api/alm/group-control'

export default{
    data() {
        return {
            queryParams:{
                ydz: '', //所属节点设备
                pageNum: 1,
                pageSize: 10,
            },
            listData: [],
            totalCount: 0,
            multipleSelection: [],
            multipleSelectionDev: [],
            multipleSelectionNumber:[],
            gwYdzDialog: false,
            gwYdz: {
                gwMac: '',
                sadder: '',
                numberNo: 100,
            },
            devYdzDialog: false,
            devYdz:{
                gwMac: '',
                sadder: '',
                numberNo: ''
            },
            singleControl: false,
            singleControlval: {
                gwMac: '',
                sadder: '',
                shansb: '',
                countdown: '',
                typeStatus: '',
                statusType: '',
                statusTypeVal: '',
                yl: '00000000'
            },
            groupControlDialog: false,
            groupControlVal: {
                typeStatus: '',
                statusType: '',
                statusTypeVal: '',
                gwMac: '',
                devNumber: ''
            }
        }
    },
    created() {
        this.handleQuery();
    },
    methods: {
        handleQuery() {
            this.getListData();
        },

        OpenGroupControlDialog() {
            if(this.multipleSelectionDev.length <= 0) {
                this.$message.error('请勾选网关');
                return;
            }else if(this.multipleSelectionNumber.length <= 0) {
                this.$message.error('请勾选从端设备');
                return;
            }
            this.groupControlDialog = true;
        },

        dateFormat_addTime: function(row) {
            return this.dateFormat(row.addTime);
        },

        dateFormat: function(intTime) {
            if(intTime == 0) {
                return "";
            }
            if(('' + intTime).length == 10) {
                intTime = intTime * 1000;
            }
            var date = Number(intTime);
            return moment(date).format("YYYY-MM-DD HH:mm");
        },

        handleSelectionChange(val) {
            this.multipleSelectionDev = []; // 存储选中的数据
            this.multipleSelectionNumber = [];

            val.forEach((value, index) => {
                // 遍历多选框获取数据
                // 遍历数据表，任一属性值相同，则说明该数据被选中，其中i为索引值
                if(value.devType == 80) {
                    this.multipleSelectionDev.push(value.sadder);
                }else {
                    this.multipleSelectionNumber.push(value.devNo);
                }
            })
        },

        getListData() {
            this.listData = [];
            getGroupControlList(this.queryParams).then(res => {
                if(res.code != 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.listData = res.data.records;
                this.queryParams.pageNum = Number(res.data.pageNum);
                this.totalCount = Number(res.data.total);
            });
        },

        sendGwYdz(){
            sendYdzByGw(this.gwYdz).then(res => {
                if(res.code != 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.gwYdzDialog = false;
                this.getListData();
                this.$message.success(res.msg);
            });
        },

        sendDevYdz() {
            sendDevNumberNo(this.devYdz).then(res => {
                if(res.code != 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.devYdzDialog = false;
                this.getListData();
                this.$message.success(res.msg);
            });
        },

        sendSingleControl() {
            sendSingleControl(this.singleControlval).then(res => {
                if(res.code != 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.singleControl = false;
                this.getListData();
                this.$message.success(res.msg);
            })
        },

        sendGroupControl() {
            sendGroupControl(this.groupControlVal).then(res => {
                if(res.code != 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.groupControlDialog = false;
                this.getListData();
                this.$message.success(res.msg);
            })
        },
        //分页导航
        handlePageChange(val) {
            this.$set(this.queryParams, 'pageNum', val);
            this.getListData();
        },

        handleSizeChange(newSize) {
            // 每页数量改变时的回调函数
            this.queryParams.pageSize = newSize;
            this.queryParams.pageNum = 1;
            this.getListData();
        }
    }
}
</script>

<style>
.input-width{
    width: 200px;
}
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 200px;
    display: inline-block;
}
.table{
    width: 100%;
    font-size: 13px;
}
.red{
    color: #ff0000;
}
.mr10{
    margin-right: 10px;
}
.table-td-thumb{
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>